<!-- 模态框组件 -->
<template>
    <div class="mask" @click.self="$parent.isshowmodal = false">
        <div class="content">
            <p>{{ isflag ? '添加用户' : '编辑用户' }}</p>
            <p><input type="text" v-model="user.name" placeholder="用户名"></p>
            <p><input type="text" v-model="user.pwd" placeholder="密码"></p>
            <p><input type="text" v-model="user.tel" placeholder="手机号"></p>
            <p><input type="text" v-model="user.email" placeholder="邮箱"></p>
            <p>
                <select name="" id="" v-model="user.status">
                    <option value="0">禁用</option>
                    <option value="1">启用</option>
                </select>
            </p>
            <p>
                <input type="radio" name="sex" value="1" v-model="user.sex">男
                <input type="radio" name="sex" value="2" v-model="user.sex">女
            </p>
            <p>
                <button @click="$parent.isshowmodal = false">取消</button>
                <button v-if="isflag" @click="addUserFn">添加确定</button>
                <button v-else @click="editUserFn">编辑确定</button>
            </p>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            user: {
                name: '',
                pwd: '',
                tel: '',
                email: '',
                sex: 1,
                status: 0
            }
        }
    },
    props: ['isflag'], // 添加和编辑状态
    methods: {
        ...mapMutations(['adduser', 'edituser']),
        // 添加用户
        addUserFn() {
            //
            // console.log(this.user);
            // 调用mutation 方法添加用户
            this.adduser(this.user)
            // 隐藏模态框
            this.$parent.isshowmodal = false
        },
        // 编辑确认用户
        editUserFn() {
            this.edituser(this.user)
            // 隐藏模态框
            this.$parent.isshowmodal = false
        }
    }
}
</script>
<style scoped>
.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    background-color: white;
    width: 400px;
    height: 300px;
    display: flex;
    flex-direction: column;
}

.content p input[type='text'] {
    width: 80%;
    height: 30px;
    margin: 10px;

}
</style>